// .测试数据
var data = [
  {
    id: 1,
    isSelected: false,
    taskContent: "测试数据",
  },
];

//.节点获取
var table = document.querySelector(".table"); //计划列表
var taskInput = document.querySelector(".form-control"); //输入框
var btnGroup = document.querySelectorAll(".btn-group>button"); //选项卡

//. 函数区
//>根据数据渲染表格函数
function renderData(data) {
  // 生成带结构的新数组
  var mapData = data.map((item, index) => {
    return `
        <tr>
          <td>
            <input type="checkbox" 
            ${item.isSelected ? "checked" : ""} />
          </td>
          <td  ${item.isSelected ? "class='gray'" : ""}>${item.taskContent}</td>
          <td >X</td>
        </tr>`;
  });
  table.innerHTML = mapData.join("");
}

//>数组添加数据函数
function addData(data) {
  data.push({
    isSelected: false,
    taskContent: taskInput.value,
  });
}

// >实时显示未完成的任务数函数
function isNotSelected(data) {
  var notSelectedSum = 0;
  data.map((item) => {
    if (!item.isSelected) {
      notSelectedSum++;
    }
  });
  return notSelectedSum;
}

//>数组删除数据函数
function deleteData(data, index) {
  data.splice(index, 1);
}

//>判断是否选中函数
function isChecked(index) {
  return data[index].isSelected;
}

//>更新数组的isSelected函数！！！
// index 需要更新的数据是第几条
// value 覆盖原来的isSelected的值
function updateIsSelected(data, index, value) {
  data[index].isSelected = value;
}

//>数组数据为0界面内容函数
function isDataNone(data = [], html = "当前无任务") {
  if (data.length === 0) {
    table.innerHTML = `<tr><td>${html}</td></tr>`;
  }
}

//>tab分页函数
var onePage, twoPage;
function getPage(data, index) {
  if (index == 0) {
    renderData(data);
    isDataNone(data);
  }
  if (index == 1) {
    onePage = data.filter((item) => {
      return !item.isSelected;
    });
    renderData(onePage);
    isDataNone(onePage, "当前没有未完成的任务");
  }
  if (index == 2) {
    twoPage = data.filter((item) => {
      return item.isSelected;
    });
    renderData(twoPage);
    isDataNone(twoPage, "当前没有完成的任务");
  }
}

//.事件区
// ?初始界面渲染（一条数据没有）
isDataNone(data);

// ?点击选项卡变色
btnGroup.forEach((item, index) => {
  item.setAttribute("data-id", index);
  item.addEventListener("click", function (e) {
    var btnIndex = e.target.dataset.id;
    getPage(data, btnIndex);
    btnGroup.forEach((btn) => (btn.classList = ""));
    item.classList = "active";
  });
});

// ?回车添加
taskInput.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    addData(data);
    renderData(data);
    // 更新未完成任务的数量
    tasknum.innerHTML = isNotSelected(data);
    // 回车后自动回到所有任务
    btnGroup.forEach((btn) => (btn.classList = ""));
    btnGroup[0].classList = "active";
  }
});

table.addEventListener("click", function (e) {
  // ?点击X删除
  // if (e.target.innerHTML === "X") {
  //   // 更新未完成任务的数量
  //   var deleteIndex = e.target.dataset.num;
  //   btnGroup.forEach((item, index) => {
  //     if (item.className == "active") {
  //       if (index == 1) {
  //         deleteData(data, deleteIndex);
  //         renderData(onePage);
  //         tasknum.innerHTML = isNotSelected(onePage);
  //         isDataNone(onePage, "当前没有未完成的任务");
  //       } else if (index == 2) {
  //         // deleteData(twoPage, deleteIndex);
  //         deleteData(data, deleteIndex);
  //         renderData(twoPage);
  //         tasknum.innerHTML = isNotSelected(twoPage);
  //         isDataNone(twoPage, "当前没有完成的任务");
  //       } else {
  //         deleteData(data, deleteIndex);
  //         renderData(data);
  //         tasknum.innerHTML = isNotSelected(data);
  //       }
  //     }
  //   });
  // }
  // ?checkbox选中后更新各个列表的状态
  if (e.target.tagName.toLocaleUpperCase() === "INPUT") {
    // 点击的索引
    var checkIndex = e.target.dataset.num;
    // 点击的checkbox的check值
    var inputChecked = e.target.checked;
    // 根据任务的分页修改对应的数组
    btnGroup.forEach((item, index) => {
      if (item.className == "active") {
        if (index == 1) {
          updateIsSelected(onePage, checkIndex, inputChecked);
          renderData(onePage);
          // 筛选出未勾选的
          getPage(onePage, index);
          // 需更新,否则会出bug
          tasknum.innerHTML = isNotSelected(onePage);
          isDataNone(onePage, "当前没有未完成的任务");
        } else if (index == 2) {
          updateIsSelected(twoPage, checkIndex, inputChecked);
          renderData(twoPage);
          // 筛选出勾选的
          getPage(twoPage, index);
          // 需更新,否则会出bug
          tasknum.innerHTML = isNotSelected(data);
          isDataNone(twoPage, "当前没有完成的任务");
        } else {
          updateIsSelected(data, checkIndex, inputChecked);
          renderData(data);
          tasknum.innerHTML = isNotSelected(data);
        }
      }
    });
  }
});
